site_8g/src/app/[locale]/(navbar)/vip/List.tsx

import { LevelInfoItem } from "@/api/user";
import clsx from "clsx";
import React from "react";
import styles from "./page.module.scss";

interface Props {
    data: LevelInfoItem[];
    level: number;
}

const List: React.FC<Props> = ({ data, level = 0 }) => {
    const DataList = React.useMemo(() => {
        return [
            // {
            //     key: "rescue",
            //     text: "Rescue",
            //     render(itemData: LevelInfoItem) {
            //         return `${itemData.daily_reward_num}(${itemData.daily_reward_multiple_num})%`;
            //     },
            // },
            {
                key: "upgrade",
                text: "Upgrade",
                render(itemData: LevelInfoItem) {
                    return itemData?.reward[0]?.amount || 0;
                },
            },
            {
                key: "day",
                text: "Daily",
                render(itemData: LevelInfoItem) {
                    return `${itemData.daily_reward_num}(${itemData.daily_reward_multiple_num})`;
                },
            },
            {
                key: "weekly",
                text: "Weekly",
                render(itemData: LevelInfoItem) {
                    return `${itemData.weekly_reward_num}(${itemData.weekly_reward_multiple_num})`;
                },
            },
            {
                key: "monthly",
                text: "Monthly",
                render(itemData: LevelInfoItem) {
                    return `${itemData.monthly_reward_num}(${itemData.monthly_reward_multiple_num})`;
                },
            },
            {
                key: "spin",
                text: "Spin",
                render(itemData: LevelInfoItem) {
                    return `${itemData?.spin}%`;
                },
            },
            {
                key: "bankruptcy",
                text: "Bankruptcy",
                render(itemData: LevelInfoItem) {
                    return `${itemData?.first_bankruptcy_reward_num || 0}(${itemData?.second_bankruptcy_reward_num || 0})`;
                },
            },
        ];
    }, []);

    return (
        <div className={"px-[10px]"}>
            <div className="flex rounded-[var(--borderRadius)] bg-[#fff]">
                <div className={clsx(styles.ListItemBox)}>
                    <div>Level</div>
                    {!!data?.length &&
                        data.map((item) => {
                            return (
                                <div
                                    key={item.id}
                                    className={clsx({
                                        "text-[red]": item.id == level,
                                    })}
                                >
                                    Vip{item.id}
                                </div>
                            );
                        })}
                </div>
                <div className="flex min-w-[0] flex-1 overflow-auto">
                    {DataList.map((item: any) => {
                        return (
                            <div key={item.key} className={clsx(styles.ListItemBox)}>
                                <div>{item.text}</div>
                                {!!data?.length &&
                                    data.map((citem: any) => {
                                        return (
                                            <div
                                                className={clsx({
                                                    "text-[red]": citem.id == level,
                                                })}
                                                key={citem.id}
                                            >
                                                {!!item.render && item.render(citem)}
                                            </div>
                                        );
                                    })}
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
};

export default List;